<template>
   <div class="container">
      <div class="login-boxtitle">
    <a href="#"><img alt="logo" src="@/assets/images/logo.png" id="img"/></a>
  </div>
   <div id="back" @click="backHome()">
            <img src="@/assets/images/back.png" alt="">
        </div>
      <fieldset>
      <legend> <h1>用户注册</h1></legend>
     <p>用户名：&nbsp;&nbsp; &nbsp; <input type="text" v-model="userName" /></p>
      <p>*密 &nbsp; &nbsp; 码： &nbsp;<input type="password" v-model="pwd" /></p>
      <br />
       <p>*确认密码： <input type="password" v-model="pwd1" /></p>
      <br />
       <p>*手机号：  &nbsp;&nbsp;&nbsp;<input type="tel" v-model="tel" /></p>
        <div id="an">
              <input type="checkbox" id="checkbox"/><p>同意以下 <a href="#">《服务条约》</a>并注册</p>
            </div>
      <button @click="regestForm()">注册</button>
       <a href="/login">已有账号？返回登录</a>
      </fieldset>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { register } from '@/api/login.js'
export default {
  name: 'registerView',
  setup () {
    const router = useRouter()
    const userName = ref('')
    const pwd = ref('')
    const pwd1 = ref('')
    const tel = ref('')
    function backHome () {
      router.push({ path: '/' })
    }
    if (pwd.value !== pwd1.value) {
      alert('两次密码不一致！请重新输入')
    }

    function regestForm () {
      // eslint-disable-next-line eqeqeq
      if (userName.value == !'' && pwd.value == !'' && tel.value == !'') {
        // alert("submit!");
        // 调用方法发送ajax请求
        register(
          userName.value,
          pwd.value,
          tel.value
        ).then((response) => {
          // console.log(response.data);
          // 这里的逻辑是如果在后台的数据库中注册成功的话，通过flag的布尔值来判断是否进入登录页面
          const resp = response.data
          if (resp.flag) {
            // 调转到登录界面
            this.$router.push('/login')
          } else {
            alert('注册失败！')
          }
        })
      } else {
        alert('注册失败！')
      }
    }
    return {
      userName,
      pwd,
      pwd1,
      tel,
      regestForm,
      backHome
    }
  }
}
</script>

<style scoped>
#back>img{
    width:40px;height: 40px;
    position:absolute;
    margin-top: 10px;
    margin-left: 20px;
    cursor: pointer;
}
.container{
  background-image: url(~@/assets/images/11.jpg);
  background-size:cover;
  position: absolute;
  width: 100%;
  height: 100%;
}
fieldset {
  text-align: center;
  width: 600px;
  height: 630px;
  border: 2px solid #000;
  background-color:rgba(176, 180, 54, 0.5);
  margin-top:50px;
  margin-left:500px;
}
input {
   width: 300px;
    height: 45px;
    background-color: rgb(231, 240, 240, 0.8);
    /* border-radius: 20px; */
    border: none;
    text-align: center;
}
p {
  display: inline-block;
  margin-left: 20px;
  font-size: 22px;
}
button {
   width: 320px;
  height: 50px;
  text-align: center;
  background-color: #b0b436;
  /* margin-top:10px; */
  margin-left: 40px;
  color: #fff;
  cursor: pointer;
  font-size: 24px
}
span {
  color: red;
  display: inline-block;
  margin-left: 90px;
}
#img{
  margin-left:400px;
  margin-top:50px;
  position:absolute;
}
fieldset>a{
  text-decoration: none;
  position: absolute;
  margin-left: -60px;
  margin-top: 90px;
  font-size:18px;
}
#checkbox{
  width: 25px;height: 25px;
  /* margin-left: -100px; */
  text-align: center;
}
</style>
